<!--
 * @Author: dawei 664690250@qq.com
 * @Date: 2023-04-06 17:29:08
 * @LastEditors: dawei 664690250@qq.com
 * @LastEditTime: 2023-04-10 18:28:33
 * @FilePath: /hn-talent-ump-vue/src/pages/schedule/modules/ScheduleNodeInfoModal.vue
 * @Description: 请填写文件描述
 * 大佬别走，带带弟弟
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
    <z-modal
      v-bind="modalOption"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
    >
      <a-spin :spinning="confirmLoading">
        <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
          <a-row>
            <a-divider v-if="showSchedule" orientation="left">计划详情</a-divider>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="分解来源" prop="source">
                <a-input v-model.trim="form.source" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="工作大类" prop = "category" >
                <a-input v-model.trim="form.category" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="重点工作" prop = "priority" >
                <a-input v-model.trim="form.priority" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="主责部门" prop = "responsibleDepts" >
                <ZSelectDept :multiple="true" v-model.trim="form.responsibleDepts" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="分管领导" prop = "leaderName" >
                <a-input v-model.trim="form.leaderName" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
              <a-form-model-item label="完成标志" prop = "completionMark" >
                <a-input v-model.trim="form.completionMark" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="showSchedule">
                <a-form-model-item label="起止时间" prop="startEndTime">
                  <a-range-picker format="YYYY-MM-DD" v-model.trim="form.startEndTime" style="width: 100%" :disabled="disableSubmit"/>
                </a-form-model-item>
            </a-col>
            <a-divider v-if="showSchedule" orientation="left">计划节点详情</a-divider>
            <a-col :span="12" >
              <a-form-model-item label="计划节点内容" prop = "content" >
                <a-input v-model.trim="form.content" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="计划节点人员" prop="nickname">
                <a-input v-model.trim="form.nickname" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
                <a-form-model-item label="计划节点牵头部门" prop = "leadingDept" >
                    <a-input v-model.trim="form.leadingDept" :disabled="disableSubmit"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12" >
                <a-form-model-item label="计划节点配合部门" prop = "cooperateDept" >
                    <a-input v-model.trim="form.cooperateDept" :disabled="disableSubmit"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="计划节点进度" prop = "progress" >
                <a-input v-model.trim="form.progress" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
              <a-form-model-item label="计划节点开始时间" prop = "startTime" >
                <a-input v-model.trim="form.startTime" :disabled="disableSubmit"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="12" >
                <a-form-model-item label="计划节点完成时间" prop="endTime">
                  <a-input v-model.trim="form.endTime" :disabled="disableSubmit"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="计划节点是否完成" prop="status">
                  <p class="plan-node">{{(form.status === '1' ? '已完成' : '未完成')}}</p>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="计划节点附件">
                <a-dropdown :trigger="['click']" @visibleChange="handleVisibleChange">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  查看附件<a-icon type="down" />
                </a>
                <a-menu slot="overlay" v-if="form.attachList && form.attachList.length">
                  <a-menu-item v-for="(item, index) in form.attachList" :key="item.id">
                    <a target="_blank" :href="item.attachUrl">
                      查看附件{{ index + 1 }}
                    </a>
                  </a-menu-item>
                </a-menu>
                <a-menu slot="overlay" v-else>
                  <a-menu-item>暂无附件</a-menu-item>
                </a-menu>
              </a-dropdown>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </z-modal>
  </template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import { getAttach } from '@/services/schedule'
import ZSelectDept from '@/components/zzbiz/ZSelectDept'
export default {
  name: 'ScheduleNodeInfoModal',
  mixins: [ModalFormMixin],
  components: { ZSelectDept },
  props: {
    showSchedule: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      validatorRules: {
        source: [{ required: true, message: '请输入分解来源' }],
        category: [{ required: true, message: '请输入工作大类' }],
        priority: [{ required: true, message: '请输入重点工作' }],
        responsibleDepts: [{ required: true, message: '请输入主责部门' }],
        leaderName: [{ required: true, message: '请输入分管领导' }],
        completionMark: [{ required: true, message: '请输入完成标志' }],
        startEndTime: [{ required: true, message: '请输入起止时间' }]
      }
    }
  },
  methods: {
    async handleVisibleChange(visible) {
      if (!visible) { return }
      const res = await getAttach(this.form.id)
      if (res && res.code === 200) {
        this.form.attachList = [...res.result]
      }
    }
  }
}
</script>

